<template>
  <div class="up-dialog">
    <up-overlay :show="show">
      <div class="up-dialog-content">
        <div v-show="title" class="up-dialog-title">
          {{ title }}
        </div>
        <div v-show="message" class="up-dialog-message">
          {{ message }}
        </div>
        <div v-show="!message" class="up-dialog-input">
          <input type="textarea" placeholder="请输入内容">
        </div>
        <div class="up-dialog-operation">
          <div class="up-operation-btn up-operation-btn-left" @click="onCancel">{{ leftText }}</div>
          <div class="up-operation-btn up-operation-btn-right" @click="onConfirm">{{ rightText }}</div>
        </div>
      </div>
    </up-overlay>
  </div>
</template>

<script>
import overlay from '@/components/common/overlay/overlay.vue'
export default {
  components: {
    'up-overlay': overlay
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: null
    },
    message: {
      type: String,
      default: '提示内容'
    },
    leftText: {
      type: String,
      default: '取消'
    },
    rightText: {
      type: String,
      default: '确定'
    }
  },
  model: {
    event: 'changeShow'
  },
  methods: {
    onConfirm () {
      this.$emit('changeShow', false)
      this.$emit('onConfirm')
    },
    onCancel () {
      this.$emit('changeShow', false)
      this.$emit('onCancel')
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./dialog.less');
</style>
